<template>
	<view class="inputp">
		<view class="inputs">
			<img class="searchimg" src="/static/search.png" alt="" @click="search" />
			<input type="text" v-model="searchval" :placeholder="placeholder" ref="searchinput" :focus="isfocus" class="scaninput" @click="clickinput" style="overflow: visible;"/>
			<img src="/static/scan.png" alt="" class="scanimg" @click="clickscan" />
			<view class="searchbtn" v-if="hassearchbtn" v-show="showsearchbtn" @click="search">搜索</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		hassearchbtn: Boolean, //是否有搜索按钮
		hasscanbtn: Boolean, //是否有扫码按钮
		isfocus: true, //是否默认focus
		hasgosearch: Boolean, //是否要跳转到搜索界面
		types: Number, //跳转的时候的参数type值
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		gourl: {
			//跳转的搜索页面
			type: String,
			default: '/pages/discount/index/index'
		}
	},
	data() {
		return {
			showsearchbtn: false,
			searchval: ''
		};
	},
	methods: {
		// 点击input的时候
		clickinput() {
			var me = this;
			if (me.hasgosearch) {
				console.log('需要跳转');
				uni.navigateTo({
					url: `${me.gourl}?type=${me.types}`
				});
			}
		},
		// 搜索
		search() {
			var me = this;
			if (me.searchval == '') {
				uni.showToast({
					icon: 'none',
					title: '请先输入搜索内容'
				});
				return;
			}
			me.$emit('serach', me.searchval);
		},
		// 点击扫码的时候
		clickscan() {
			var me = this;
			if (me.hasscanbtn) {
				uni.navigateTo({
					url: `${me.gourl}?cameratype=scan&type=${me.types}`
				});
				return;
			}
			uni.scanCode({
				success(res) {
					var result = res.result;
					var arrs = result.split('?')[1].split('&');
					var code = '';
					arrs.forEach(e => {
						var arr = e.split('=');
						if (arr[0] == 'code') {
							code = arr[1];
						}
					});
					me.searchval = code;
				}
			});
		}
	},
	watch: {
		searchval(v) {
			var me = this;
			me.$emit('inputchange', v);
			if (v != '') {
				me.showsearchbtn = true;
			} else {
				me.showsearchbtn = false;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.inputp {
	border-bottom: 1px solid #C8C7CC;
	border-radius: 30rpx;
	// padding: 20upx;
	.inputs {
		background: #fff;
		border-radius: 20rpx;
		position: relative;
		.scaninput {
			margin: 0;
			height: 60px;
			// margin: 20px ;
			// padding: 20px;
			padding: 0upx 80upx 0upx 90upx;
		}
		.searchimg {
			width: 2em;
			height: 2em;
			position: absolute;
			top: 30upx;
			left: 11upx;
		}
		.scanimg {
			width: 2em;
			height: 2em;
			position: absolute;
			top: 30upx;
			right: 20upx;
		}
		.searchbtn {
			position: absolute;
			right: 20upx;
			top: 15upx;
			// border-radius: 5upx;
			background: #FFFFFF;
			color: #fff;
			width: 4em;
			line-height: 2em;
			text-align: center;
			font-size: 0.8em;
		}
	}
}
</style>
